<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试 - SimpleHire</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #2563eb;
            --success-color: #059669;
            --warning-color: #d97706;
            --danger-color: #dc2626;
        }
        
        body {
            background-color: #f8fafc;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .navbar {
            background: white !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .main-container {
            padding: 2rem 0;
            min-height: calc(100vh - 76px);
        }
        
        .interview-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: none;
            overflow: hidden;
        }
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
            color: white;
            padding: 2rem;
            border: none;
        }
        
        .card-body {
            padding: 2.5rem;
        }
        
        .upload-area {
            border: 3px dashed #d1d5db;
            border-radius: 15px;
            padding: 3rem;
            text-align: center;
            transition: all 0.3s ease;
            background: #f9fafb;
            cursor: pointer;
        }
        
        .upload-area:hover {
            border-color: var(--primary-color);
            background: #eff6ff;
        }
        
        .upload-area.dragover {
            border-color: var(--primary-color);
            background: #eff6ff;
            transform: scale(1.02);
        }
        
        .upload-icon {
            font-size: 4rem;
            color: #9ca3af;
            margin-bottom: 1rem;
        }
        
        .upload-area:hover .upload-icon {
            color: var(--primary-color);
        }
        
        .file-input {
            display: none;
        }
        
        .btn-upload {
            background: var(--primary-color);
            border: none;
            border-radius: 10px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-upload:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
        }
        
        .form-control, .form-select {
            border-radius: 10px;
            border: 2px solid #e5e7eb;
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
        }
        
        .textarea-large {
            min-height: 200px;
            resize: vertical;
        }
        
        .file-preview {
            background: #f3f4f6;
            border-radius: 10px;
            padding: 1rem;
            margin-top: 1rem;
            display: none;
        }
        
        .file-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .file-details {
            display: flex;
            align-items: center;
        }
        
        .file-icon {
            font-size: 2rem;
            margin-right: 1rem;
            color: var(--primary-color);
        }
        
        .btn-remove {
            background: var(--danger-color);
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s ease;
        }
        
        .btn-remove:hover {
            background: #b91c1c;
            transform: scale(1.1);
        }
        
        .progress {
            height: 8px;
            border-radius: 4px;
            background: #e5e7eb;
            margin-top: 1rem;
            display: none;
        }
        
        .progress-bar {
            border-radius: 4px;
            background: var(--success-color);
        }
        
        .alert {
            border-radius: 10px;
            border: none;
            padding: 1rem 1.5rem;
        }
        
        .nav-tabs {
            border: none;
            margin-bottom: 2rem;
        }
        
        .nav-tabs .nav-link {
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            margin-right: 1rem;
            color: #6b7280;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .nav-tabs .nav-link.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        
        .nav-tabs .nav-link:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        
        .nav-tabs .nav-link.active:hover {
            color: white;
        }
        
        .tab-content {
            background: transparent;
        }
        
        .btn-start {
            background: linear-gradient(135deg, var(--success-color), #047857);
            border: none;
            border-radius: 10px;
            padding: 1rem 3rem;
            font-size: 1.1rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-start:hover {
            background: linear-gradient(135deg, #047857, #065f46);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(5, 150, 105, 0.3);
        }
        
        .btn-start:disabled {
            background: #9ca3af;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .loading-spinner {
            display: none;
        }
        
        .character-count {
            font-size: 0.875rem;
            color: #6b7280;
            text-align: right;
            margin-top: 0.5rem;
        }
        
        .character-count.warning {
            color: var(--warning-color);
        }
        
        .character-count.danger {
            color: var(--danger-color);
        }
        
        .tips-section {
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            border-radius: 15px;
            padding: 2rem;
            margin-top: 2rem;
        }
        
        .tip-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1rem;
        }
        
        .tip-icon {
            color: var(--primary-color);
            margin-right: 0.75rem;
            margin-top: 0.25rem;
            font-size: 1.1rem;
        }
        
        @media (max-width: 768px) {
            .main-container {
                padding: 1rem 0;
            }
            
            .card-body {
                padding: 1.5rem;
            }
            
            .upload-area {
                padding: 2rem 1rem;
            }
            
            .btn-start {
                padding: 0.75rem 2rem;
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-robot me-2"></i>SimpleHire
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume/analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/job-matching">岗位匹配</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/reports">报告中心</a>
                    </li>
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">
                                <i class="bi bi-person me-2"></i>个人资料
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form th:action="@{/logout}" method="post" class="d-inline">
                                    <button type="submit" class="dropdown-item">
                                        <i class="bi bi-box-arrow-right me-2"></i>退出登录
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- Main Content -->
    <div class="main-container">
        <div class="container">
            <!-- Flash Messages -->
            <div th:if="${message}" class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-2"></i>
                <span th:text="${message}"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            
            <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <span th:text="${error}"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="card interview-card">
                        <div class="card-header text-center">
                            <h1 class="mb-0">
                                <i class="bi bi-robot me-3"></i>AI面试系统
                            </h1>
                            <p class="mb-0 mt-2 opacity-75">
                                上传您的简历，开始智能面试体验
                            </p>
                        </div>
                        
                        <div class="card-body">
                            <!-- Resume Input Tabs -->
                            <ul class="nav nav-tabs" id="resumeTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload-pane" type="button" role="tab">
                                        <i class="bi bi-cloud-upload me-2"></i>上传简历文件
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="text-tab" data-bs-toggle="tab" data-bs-target="#text-pane" type="button" role="tab">
                                        <i class="bi bi-file-text me-2"></i>粘贴简历文本
                                    </button>
                                </li>
                            </ul>
                            
                            <div class="tab-content" id="resumeTabContent">
                                <!-- File Upload Tab -->
                                <div class="tab-pane fade show active" id="upload-pane" role="tabpanel">
                                    <form id="uploadForm" th:action="@{/interview/upload}" method="post" enctype="multipart/form-data">
                                        <div class="upload-area" id="uploadArea">
                                            <div class="upload-icon">
                                                <i class="bi bi-cloud-upload"></i>
                                            </div>
                                            <h4 class="mb-3">拖拽文件到此处或点击上传</h4>
                                            <p class="text-muted mb-3">
                                                支持 PDF、DOCX 格式，文件大小不超过 10MB
                                            </p>
                                            <input type="file" id="resumeFile" name="resumeFile" class="file-input" accept=".pdf,.docx,.doc">
                                            <button type="button" class="btn btn-primary btn-upload" onclick="document.getElementById('resumeFile').click()">
                                                <i class="bi bi-folder2-open me-2"></i>选择文件
                                            </button>
                                        </div>
                                        
                                        <!-- File Preview -->
                                        <div class="file-preview" id="filePreview">
                                            <div class="file-info">
                                                <div class="file-details">
                                                    <i class="bi bi-file-earmark-pdf file-icon" id="fileIcon"></i>
                                                    <div>
                                                        <div class="fw-bold" id="fileName">文件名.pdf</div>
                                                        <small class="text-muted" id="fileSize">1.2 MB</small>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-remove" onclick="removeFile()">
                                                    <i class="bi bi-x"></i>
                                                </button>
                                            </div>
                                            <div class="progress" id="uploadProgress">
                                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="text-center mt-4">
                                            <button type="submit" class="btn btn-success btn-start" id="startInterviewBtn" disabled>
                                                <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status"></span>
                                                <i class="bi bi-play-circle me-2"></i>开始面试
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                
                                <!-- Text Input Tab -->
                                <div class="tab-pane fade" id="text-pane" role="tabpanel">
                                    <form id="textForm" th:action="@{/interview/text}" method="post">
                                        <div class="mb-4">
                                            <label for="resumeText" class="form-label">
                                                <i class="bi bi-file-text me-2"></i>简历内容
                                            </label>
                                            <textarea class="form-control textarea-large" 
                                                      id="resumeText" 
                                                      name="resumeText" 
                                                      placeholder="请粘贴您的简历内容...\n\n包括：\n• 个人信息\n• 教育经历\n• 工作经验\n• 技能特长\n• 项目经历等"
                                                      maxlength="10000"></textarea>
                                            <div class="character-count" id="charCount">0 / 10000 字符</div>
                                        </div>
                                        
                                        <div class="text-center">
                                            <button type="submit" class="btn btn-success btn-start" id="startTextInterviewBtn" disabled>
                                                <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status"></span>
                                                <i class="bi bi-play-circle me-2"></i>开始面试
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            
                            <!-- Tips Section -->
                            <div class="tips-section">
                                <h5 class="mb-3">
                                    <i class="bi bi-lightbulb me-2"></i>面试小贴士
                                </h5>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="tip-item">
                                            <i class="bi bi-check-circle tip-icon"></i>
                                            <div>
                                                <strong>简历完整性：</strong>确保包含个人信息、教育背景、工作经历等关键信息
                                            </div>
                                        </div>
                                        <div class="tip-item">
                                            <i class="bi bi-check-circle tip-icon"></i>
                                            <div>
                                                <strong>技能描述：</strong>详细描述您的专业技能和项目经验
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="tip-item">
                                            <i class="bi bi-check-circle tip-icon"></i>
                                            <div>
                                                <strong>格式清晰：</strong>使用清晰的格式和结构，便于AI理解
                                            </div>
                                        </div>
                                        <div class="tip-item">
                                            <i class="bi bi-check-circle tip-icon"></i>
                                            <div>
                                                <strong>真实准确：</strong>提供真实的信息，AI将基于此生成面试问题
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // File upload handling
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('resumeFile');
        const filePreview = document.getElementById('filePreview');
        const startBtn = document.getElementById('startInterviewBtn');
        const uploadForm = document.getElementById('uploadForm');
        
        // Text input handling
        const resumeText = document.getElementById('resumeText');
        const charCount = document.getElementById('charCount');
        const startTextBtn = document.getElementById('startTextInterviewBtn');
        const textForm = document.getElementById('textForm');
        
        // Drag and drop events
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFileSelect(files[0]);
            }
        });
        
        // File input change
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });
        
        // Handle file selection
        function handleFileSelect(file) {
            // Validate file type
            const allowedTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword'];
            if (!allowedTypes.includes(file.type)) {
                alert('请选择 PDF 或 DOCX 格式的文件');
                return;
            }
            
            // Validate file size (10MB)
            if (file.size > 10 * 1024 * 1024) {
                alert('文件大小不能超过 10MB');
                return;
            }
            
            // Update file input
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            fileInput.files = dataTransfer.files;
            
            // Show file preview
            showFilePreview(file);
            
            // Enable start button
            startBtn.disabled = false;
        }
        
        // Show file preview
        function showFilePreview(file) {
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const fileIcon = document.getElementById('fileIcon');
            
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            
            // Update icon based on file type
            if (file.type === 'application/pdf') {
                fileIcon.className = 'bi bi-file-earmark-pdf file-icon';
            } else {
                fileIcon.className = 'bi bi-file-earmark-word file-icon';
            }
            
            filePreview.style.display = 'block';
        }
        
        // Remove file
        function removeFile() {
            fileInput.value = '';
            filePreview.style.display = 'none';
            startBtn.disabled = true;
        }
        
        // Format file size
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // Text input character count
        resumeText.addEventListener('input', () => {
            const length = resumeText.value.length;
            const maxLength = 10000;
            
            charCount.textContent = `${length} / ${maxLength} 字符`;
            
            if (length > maxLength * 0.9) {
                charCount.className = 'character-count danger';
            } else if (length > maxLength * 0.8) {
                charCount.className = 'character-count warning';
            } else {
                charCount.className = 'character-count';
            }
            
            // Enable/disable start button
            startTextBtn.disabled = length < 50; // Minimum 50 characters
        });
        
        // Form submission handling
        uploadForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            if (!fileInput.files[0]) {
                alert('请先选择文件');
                return;
            }
            
            showLoading(startBtn);
            
            // Simulate upload progress
            const progressBar = document.querySelector('#uploadProgress .progress-bar');
            const progress = document.getElementById('uploadProgress');
            progress.style.display = 'block';
            
            let width = 0;
            const interval = setInterval(() => {
                width += Math.random() * 15;
                if (width >= 90) {
                    clearInterval(interval);
                    // Submit form
                    uploadForm.submit();
                } else {
                    progressBar.style.width = width + '%';
                }
            }, 200);
        });
        
        textForm.addEventListener('submit', (e) => {
            if (resumeText.value.trim().length < 50) {
                e.preventDefault();
                alert('简历内容至少需要50个字符');
                return;
            }
            
            showLoading(startTextBtn);
        });
        
        // Show loading state
        function showLoading(button) {
            const spinner = button.querySelector('.loading-spinner');
            const icon = button.querySelector('.bi-play-circle');
            
            spinner.style.display = 'inline-block';
            icon.style.display = 'none';
            button.disabled = true;
            
            const originalText = button.textContent.trim();
            button.innerHTML = button.innerHTML.replace(originalText.split(' ').slice(-2).join(' '), '处理中...');
        }
        
        // Tab switching
        document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
            tab.addEventListener('shown.bs.tab', (e) => {
                // Reset forms when switching tabs
                if (e.target.id === 'upload-tab') {
                    textForm.reset();
                    startTextBtn.disabled = true;
                    charCount.textContent = '0 / 10000 字符';
                    charCount.className = 'character-count';
                } else {
                    removeFile();
                }
            });
        });
    </script>
</body>
</html>